import React, { useState, useContext, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Dimensions,
} from "react-native";
import { Dropdown as DropDwon } from "react-native-element-dropdown";
import Dropdown from "../../components/dropdown";
import query from "../../api/query";
import { Entypo } from "@expo/vector-icons";
import { Feather } from "@expo/vector-icons";
import SpeedContext from "../../context/questionnaire/SpeedContext";
import LoadingBar from "../../components/InterView/LoadingBar";
import AsyncStorage from "@react-native-async-storage/async-storage";

const { width: DEVICE_WIDTH } = Dimensions.get("window");
const PlanSpeedAuditor = ({ navigation }) => {
  const { SpeedData, getSpeed, tDateArr, dateArr } = useContext(SpeedContext);

  useEffect(() => {
    getAllGroup();
    getAllInterviewSpeed();
  }, []);

  useEffect(() => {
    let d_visible = new Array(SpeedData.length).fill(false);
    setVisibleArr(d_visible);
  }, [SpeedData]);

  const [visibleArr, setVisibleArr] = useState([]);
  const [fvisibleArr, setFvisibleArr] = useState([]);
  const [isInterviewTag, setIsInterviewTag] = useState(true);
  const [isSpeedLoading, setIsSpeedLoading] = useState(false);
  const [ispFocus, setIspFocus] = useState(false);
  const [group, setGroup] = useState("全部");
  const [groupData, setGroupData] = useState([
    { label: "全部", value: "全部" },
  ]);
  const [isToday, setIsToday] = useState(false);
  const [timeKey, setTimeKey] = useState(0);
  const [interviewSpeedList, setInterviewSpeedList] = useState([]);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <View style={{ flexDirection: "row" }}>
          <TouchableOpacity onPress={() => refreshSpeed()}>
            <Feather name="refresh-cw" size={20} color="#fff" />
          </TouchableOpacity>
        </View>
      ),
    });
  }, [navigation]);

  const refreshSpeed = async () => {
    console.log("---", isInterviewTag);
    setIsSpeedLoading(true);
    if (isInterviewTag) {
      updateSpeed(group, () => {
        setIsSpeedLoading(false);
      });
    } else {
      await getSpeed();
      setIsSpeedLoading(false);
    }
  };

  const getAllGroup = async () => {
    try {
      const result = await query.get("/user/group");
      let groupData = [{ label: "全部", value: "全部" }];
      let groups = result.data.data.sort();
      groups.map((item) => {
        const groupItem = new Object();
        groupItem.label = item;
        groupItem.value = item;
        groupData.push(groupItem);
      });
      setGroupData(groupData);
    } catch (err) {
      console.log("获取全部分组失败");
    }
  };

  const getAllInterviewSpeed = async () => {
    try {
      setIsSpeedLoading(true);
      //1、获得所有的访谈记录
      const token = await AsyncStorage.getItem("token");
      const result = await query.get("/interview/", {
        headers: { Authorization: token },
      });
      let allinterview = result.data.data;
      //2、将同一天访谈记录放在一个数组里
      let interviewByDay = Object.values(
        allinterview.reduce((res, item) => {
          res[item.date]
            ? res[item.date].push(item)
            : (res[item.date] = [item]);
          return res;
        }, {})
      );
      //3、构造访谈进度
      let interviewSpeed = interviewByDay.map((interview) => {
        let speedData = {
          group: [],
          time: "",
          municipalInterview: 0,
          countyInterview: 0,
          townshipInterview: 0,
          villageInterview: 0,
          contactTalk: 0,
          resettlementInterview: 0,
          municipalLeaders: 0,
          municipalDepartment: 0,
          countyLeaders: 0,
          countyDepartment: 0,
          townshipLeaders: 0,
          villageCadres: 0,
          villageDoctorsAndPrincipals: 0,
          firstSecretary: 0,
          NPCdeputies: 0,
        };
        interview.map((item) => {
          switch (item.type) {
            case "市级访谈":
              speedData.municipalInterview++;
              break;
            case "县级访谈":
              speedData.countyInterview++;
              break;
            case "镇级访谈":
              speedData.townshipInterview++;
              break;
            case "村级访谈":
              speedData.villageInterview++;
              break;
            case "对接会讲话":
              speedData.contactTalk++;
              break;
            case "安置点访谈":
              speedData.resettlementInterview++;
              break;
            default:
              break;
          }
          speedData.municipalLeaders += item.municipalLeaders;
          speedData.municipalDepartment += item.municipalDepartment;
          speedData.countyLeaders += item.countyLeaders;
          speedData.countyDepartment += item.countyDepartment;
          speedData.townshipLeaders += item.townshipLeaders;
          speedData.villageCadres += item.villageCadres;
          speedData.villageDoctorsAndPrincipals +=
            item.villageDoctorsAndPrincipals;
          speedData.firstSecretary += item.firstSecretary;
          speedData.NPCdeputies += item.NPCdeputies;
          speedData.time = item.date;
          speedData.group.push(item.publisher.group);
        });
        let quchonggroup = speedData.group.filter(
          (value, index, array) => array.indexOf(value) === index
        );
        let sortquchonggroup = quchonggroup.sort((x, y) => x - y);
        speedData.group = sortquchonggroup.join();
        return speedData;
      });
      const sortInterviewSpeed = interviewSpeed.sort((a, b) => {
        return a.time < b.time ? 1 : -1;
      });
      let f_visible = new Array(sortInterviewSpeed.length).fill(false);
      setFvisibleArr(f_visible);
      setInterviewSpeedList(sortInterviewSpeed);
      setIsSpeedLoading(false);
    } catch (err) {
      setIsSpeedLoading(false);
      console.log("获取所有访谈进度失败", err);
    }
  };

  const updateSpeed = async (group) => {
    try {
      setIsSpeedLoading(true);
      //1、获得所有的访谈记录
      const token = await AsyncStorage.getItem("token");
      const result = await query.get("/interview/", {
        headers: { Authorization: token },
      });
      let allinterview = result.data.data;
      //2.筛选分组
      if (group != "全部") {
        allinterview = allinterview.filter(
          (item) => item.publisher.group === group
        );
      }
      //3、将同一天访谈记录放在一个数组里
      let interviewByDay = Object.values(
        allinterview.reduce((res, item) => {
          res[item.date]
            ? res[item.date].push(item)
            : (res[item.date] = [item]);
          return res;
        }, {})
      );
      //4、构造访谈进度
      let interviewSpeed = interviewByDay.map((interview) => {
        let speedData = {
          group: [],
          province: "",
          city: "",
          time: "",
          municipalInterview: 0,
          countyInterview: 0,
          townshipInterview: 0,
          villageInterview: 0,
          contactTalk: 0,
          resettlementInterview: 0,
          municipalLeaders: 0,
          municipalDepartment: 0,
          countyLeaders: 0,
          countyDepartment: 0,
          townshipLeaders: 0,
          villageCadres: 0,
          villageDoctorsAndPrincipals: 0,
          firstSecretary: 0,
          NPCdeputies: 0,
        };
        interview.map((item) => {
          switch (item.type) {
            case "市级访谈":
              speedData.municipalInterview++;
              break;
            case "县级访谈":
              speedData.countyInterview++;
              break;
            case "镇级访谈":
              speedData.townshipInterview++;
              break;
            case "村级访谈":
              speedData.villageInterview++;
              break;
            case "对接会讲话":
              speedData.contactTalk++;
              break;
            case "安置点访谈":
              speedData.resettlementInterview++;
              break;
            default:
              break;
          }
          speedData.municipalLeaders += item.municipalLeaders;
          speedData.municipalDepartment += item.municipalDepartment;
          speedData.countyLeaders += item.countyLeaders;
          speedData.countyDepartment += item.countyDepartment;
          speedData.townshipLeaders += item.townshipLeaders;
          speedData.villageCadres += item.villageCadres;
          speedData.villageDoctorsAndPrincipals +=
            item.villageDoctorsAndPrincipals;
          speedData.firstSecretary += item.firstSecretary;
          speedData.NPCdeputies += item.NPCdeputies;
          speedData.group.push(item.publisher.group);
          speedData.province = item.province;
          speedData.city = item.city;
          speedData.time = item.date;
        });

        let quchonggroup = speedData.group.filter(
          (value, index, array) => array.indexOf(value) === index
        );
        let sortquchonggroup = quchonggroup.sort((x, y) => x - y);
        speedData.group = sortquchonggroup.join();
        return speedData;
      });
      const sortInterviewSpeed = interviewSpeed.sort((a, b) => {
        return a.time < b.time ? 1 : -1;
      });
      let f_visible = new Array(sortInterviewSpeed.length).fill(false);
      setFvisibleArr(f_visible);
      setInterviewSpeedList(sortInterviewSpeed);
      setIsSpeedLoading(false);
    } catch (err) {
      setIsSpeedLoading(false);
      console.log("更新访谈进度失败", err);
    }
  };

  return (
    <View style={styles.container}>
      <LoadingBar visible={isSpeedLoading} />
      {/* 头部 */}
      <View style={styles.headView}>
        {isInterviewTag ? (
          <View></View>
        ) : (
          // <View style={[styles.tagView, { marginLeft: 20 }]}>
          <View style={[{ marginLeft: 20, marginRight: 3 }]}>
            {/* <TouchableOpacity
              onPress={() => {
                setIsToday(!isToday);
              }}
            >
              <View
                style={[
                  styles.tag,
                  { backgroundColor: isToday ? "#41C3EE" : "#ffffff" },
                ]}
              >
                <Text style={{ fontSize: 12 }}>今天</Text>
              </View>
            </TouchableOpacity> */}
            <Dropdown
              ifFirst={1}
              initialValues={{
                initKey: timeKey,
                initOptions: dateArr,
              }}
              initialStyles={{
                valueWith: 140,
                optionsWidth: 150,
                valueFontSize: 14,
                optionsMarginTop: 90,
                optionsBackGroundColor: "#f1f1f1",
                optionsBorderColor: "#ccc",
              }}
              onSelect={(item, value) => {
                setTimeKey(value);
              }}
            ></Dropdown>
          </View>
        )}
        {/* <View style={[styles.tagView, { marginRight: 20 }]}> */}
        <View style={[styles.tagView, { marginRight: 20, height: 24 }]}>
          <TouchableOpacity
            onPress={() => {
              setIsInterviewTag(true);
            }}
          >
            <View
              style={[
                styles.leftTag,
                {
                  backgroundColor: isInterviewTag ? "#41C3EE" : "#ffffff",
                },
              ]}
            >
              <Text style={{ fontSize: 12 }}>访谈</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              setIsInterviewTag(false);
            }}
          >
            <View
              style={[
                styles.rightTag,
                { backgroundColor: isInterviewTag ? "#ffffff" : "#41C3EE" },
              ]}
            >
              <Text style={{ fontSize: 12 }}>调研</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
      <ScrollView showsVerticalScrollIndicator={false}>
        {isInterviewTag ? (
          <View>
            {/* 筛选框 */}
            <DropDwon
              style={[styles.dropdown, ispFocus && { borderColor: "#FBB764" }]}
              placeholderStyle={styles.placeholderStyle}
              selectedTextStyle={styles.selectedTextStyle}
              inputSearchStyle={styles.inputSearchStyle}
              iconStyle={styles.iconStyle}
              containerStyle={{ marginTop: -10 }}
              data={groupData}
              value={group}
              maxHeight={300}
              labelField="label"
              valueField="value"
              placeholder={!ispFocus ? "请选择组别" : "..."}
              searchPlaceholder="Search..."
              onFocus={() => setIspFocus(true)}
              onBlur={() => setIspFocus(false)}
              onChange={(item) => {
                setGroup(item.value);
                updateSpeed(item.value);
              }}
            />
            {/* 访谈进度列表 */}
            {interviewSpeedList.length != 0 ? (
              <View>
                {interviewSpeedList.map((item, index) => {
                  return (
                    <View key={index} style={styles.cardView}>
                      {fvisibleArr[index] ? (
                        <TouchableOpacity
                          onPress={() => {
                            const newfvisibleArr = fvisibleArr.map(
                              (visible, arrIndex) => {
                                return arrIndex == index ? !visible : visible;
                              }
                            );
                            setFvisibleArr(newfvisibleArr);
                          }}
                        >
                          {group != "全部" ? (
                            <View>
                              <View style={styles.topStyle}>
                                <Text style={styles.topText}>
                                  调研组：{item.group}
                                </Text>
                                <Text style={styles.topText}>{item.time}</Text>
                              </View>
                              <View style={styles.addrStyle}>
                                {item.province == "" && item.city == "" ? (
                                  <Text style={styles.addrText}>暂无地址</Text>
                                ) : (
                                  <Text style={styles.addrText}>
                                    {item.province}
                                    {item.city}
                                  </Text>
                                )}
                              </View>
                            </View>
                          ) : (
                            <View>
                              <View style={styles.topStyleAll}>
                                <Text style={styles.topText}>{item.time}</Text>
                              </View>
                              <View style={styles.addrStyle}>
                                <Text style={styles.addrText}>
                                  调研组：{item.group}
                                </Text>
                              </View>
                            </View>
                          )}

                          {/* 问卷个数 */}
                          <View style={styles.interviewStyle}>
                            <Text style={styles.interviewTitle}>问卷个数</Text>
                            <View style={styles.interviewContainer}>
                              <View style={styles.interviewborder}>
                                <Text style={styles.interviewTag}>
                                  市级访谈
                                </Text>
                                <Text style={styles.interviewCount}>
                                  {item.municipalInterview}份
                                </Text>
                              </View>
                              <View style={styles.interviewborder}>
                                <Text style={styles.interviewTag}>
                                  县级访谈
                                </Text>
                                <Text style={styles.interviewCount}>
                                  {item.countyInterview}份
                                </Text>
                              </View>
                              <View style={styles.interviewborder}>
                                <Text style={styles.interviewTag}>
                                  对接会讲话
                                </Text>
                                <Text style={styles.interviewCount}>
                                  {item.contactTalk}份
                                </Text>
                              </View>
                              <View style={styles.interviewborder}>
                                <Text style={styles.interviewTag}>
                                  镇级访谈
                                </Text>
                                <Text style={styles.interviewCount}>
                                  {item.townshipInterview}份
                                </Text>
                              </View>
                              <View style={styles.interviewborder}>
                                <Text style={styles.interviewTag}>
                                  村级访谈
                                </Text>
                                <Text style={styles.interviewCount}>
                                  {item.villageInterview}份
                                </Text>
                              </View>
                              <View style={styles.interviewborder}>
                                <Text style={styles.interviewTag}>
                                  安置点访谈
                                </Text>
                                <Text style={styles.interviewCount}>
                                  {item.resettlementInterview}份
                                </Text>
                              </View>
                            </View>
                          </View>

                          {/* 座谈访谈人次 */}
                          <View style={styles.fantanStyle}>
                            <Text style={styles.fantanTitle}>座谈访谈人次</Text>
                            <View style={styles.interviewContainer}>
                              <View style={styles.fantanborder}>
                                <Text style={styles.fantanTag}>市级领导</Text>
                                <Text style={styles.fantanCount}>
                                  {item.municipalLeaders}人
                                </Text>
                              </View>
                              <View style={styles.fantanborder}>
                                <Text style={styles.fantanTag}>
                                  市级行业部门
                                </Text>
                                <Text style={styles.fantanCount}>
                                  {item.municipalDepartment}人
                                </Text>
                              </View>
                              <View style={styles.fantanborder}>
                                <Text style={styles.fantanTag}>乡镇干部</Text>
                                <Text style={styles.fantanCount}>
                                  {item.townshipLeaders}人
                                </Text>
                              </View>
                              <View style={styles.fantanborder}>
                                <Text style={styles.fantanTag}>县级领导</Text>
                                <Text style={styles.fantanCount}>
                                  {item.countyLeaders}人
                                </Text>
                              </View>
                              <View style={styles.fantanborder}>
                                <Text style={styles.fantanTag}>
                                  县级行业部门
                                </Text>
                                <Text style={styles.fantanCount}>
                                  {item.countyDepartment}人
                                </Text>
                              </View>
                              <View style={styles.fantanborder}>
                                <Text style={styles.fantanTag}>村干部</Text>
                                <Text style={styles.fantanCount}>
                                  {item.villageCadres}人
                                </Text>
                              </View>
                              <View style={styles.fantanborder}>
                                <Text style={styles.fantanTag}>第一书记和</Text>
                                <Text style={styles.fantanTag}>驻村工作队</Text>
                                <Text style={styles.fantanCount}>
                                  {item.firstSecretary}人
                                </Text>
                              </View>
                              <View style={styles.fantanborder}>
                                <Text style={styles.fantanTag}>人大代表和</Text>
                                <Text style={styles.fantanTag}>政协委员</Text>
                                <Text style={styles.fantanCount}>
                                  {item.NPCdeputies}人
                                </Text>
                              </View>

                              <View style={styles.fantanborder}>
                                <Text style={styles.fantanTag}>村医和</Text>
                                <Text style={styles.fantanTag}>小学校长</Text>
                                <Text style={styles.fantanCount}>
                                  {item.villageDoctorsAndPrincipals}人
                                </Text>
                              </View>
                            </View>
                          </View>
                        </TouchableOpacity>
                      ) : (
                        <TouchableOpacity
                          onPress={() => {
                            const newfvisibleArr = fvisibleArr.map(
                              (visible, arrIndex) => {
                                return arrIndex == index ? !visible : visible;
                              }
                            );
                            setFvisibleArr(newfvisibleArr);
                          }}
                        >
                          {group != "全部" ? (
                            <View
                              style={{
                                flexDirection: "row",
                                justifyContent: "space-between",
                                alignItems: "center",
                                paddingHorizontal: 10,
                                paddingVertical: 5,
                              }}
                            >
                              <Text style={styles.heqiTitle}>
                                调研组：{item.group}
                              </Text>
                              <View>
                                {item.province == "" && item.city == "" ? (
                                  <Text style={styles.heqiTitle}>暂无地址</Text>
                                ) : (
                                  <Text style={styles.heqiTitle}>
                                    {item.province}
                                    {item.city}
                                  </Text>
                                )}
                              </View>
                              <Text style={styles.heqiTitle}>{item.time}</Text>
                            </View>
                          ) : (
                            <View
                              style={{
                                justifyContent: "center",
                                paddingHorizontal: 15,
                                paddingVertical: 5,
                              }}
                            >
                              <Text style={[styles.heqiTitle]}>
                                调研组：{item.group}
                              </Text>

                              <Text style={[styles.heqiTime]}>{item.time}</Text>
                            </View>
                          )}
                        </TouchableOpacity>
                      )}
                    </View>
                  );
                })}
              </View>
            ) : (
              <View
                style={{
                  marginBottom: 30,
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <Entypo name="direction" size={24} color="#ddd" />
                <Entypo name="archive" size={60} color="#ddd" />
                <Text style={{ color: "#bbb" }}>暂无数据</Text>
              </View>
            )}

            {/* 刷新按钮 */}
            {/* <TouchableOpacity
              style={styles.button}
              onPress={() => {
                setIsSpeedLoading(true);
                updateSpeed(group, () => {
                  setIsSpeedLoading(false);
                });
              }}
            >
              <Text style={styles.buttonText}>刷新</Text>
            </TouchableOpacity> */}
          </View>
        ) : (
          <View>
            {SpeedData.map((speed, index) => {
              let s_time = new Date(speed.time);
              s_time =
                s_time.getFullYear() +
                "." +
                (s_time.getMonth() + 1) +
                "." +
                s_time.getDate();
              // if (
              //   (isToday &&
              //     new Date(speed.time).getDate() == new Date().getDate()) ||
              //   !isToday
              // )
              if (
                new Date(speed.time).setHours(0, 0, 0, 0) ==
                  tDateArr[timeKey] ||
                timeKey == dateArr.length - 1
              ) {
                if (visibleArr[index]) {
                  return (
                    <View key={index} style={styles.cardView}>
                      <TouchableOpacity
                        onPress={() => {
                          setVisibleArr((preArr) => {
                            return preArr.map((visible, arrIndex) => {
                              return arrIndex == index ? !visible : visible;
                            });
                          });
                        }}
                      >
                        <View>
                          <View style={styles.rowView}>
                            {/* <View style={{ flexDirection: "row", flex: 1 }}>
                              <Text style={styles.titleText}>调研省：</Text>
                              <Text>{speed.province}</Text>
                            </View> */}
                            <View style={{ flexDirection: "row", flex: 1 }}>
                              <Text style={styles.titleText}>时间：</Text>
                              <Text>{s_time}</Text>
                            </View>
                            <View style={{ flexDirection: "row", flex: 1 }}>
                              <Text style={styles.titleText}>调研市：</Text>
                              <Text>{speed.city}</Text>
                            </View>
                          </View>
                          {/* <View style={styles.rowView}>
                            <View style={{ flexDirection: "row", flex: 1 }}>
                              <Text style={styles.titleText}>调研县：</Text>
                              <Text>{speed.country}</Text>
                            </View>
                            <View style={{ flexDirection: "row", flex: 1 }}>
                              <Text style={styles.titleText}>调研镇：</Text>
                              <Text>{speed.town}</Text>
                            </View>
                          </View>
                          <View style={styles.rowView}>
                            <View style={{ flexDirection: "row", flex: 1 }}>
                              <Text style={styles.titleText}>调研村：</Text>
                              <Text>{speed.village}</Text>
                            </View>
                            <View style={{ flexDirection: "row", flex: 1 }}>
                              <Text style={styles.titleText}>村属性：</Text>
                              <Text>{speed.attribute}</Text>
                            </View>
                          </View> */}
                          {/* <View style={styles.rowView}>
                            <View style={{ flexDirection: "row", flex: 1 }}>
                              <Text style={styles.titleText}>时间：</Text>
                              <Text>{s_time}</Text>
                            </View>
                          </View> */}
                        </View>
                        <View>
                          <View style={styles.titleView}>
                            <Text style={styles.bigTitleText}>脱贫户问卷</Text>
                            <Text style={{ paddingTop: 1 }}>
                              {"（共" +
                                (speed.tuopinhu[0] +
                                  speed.tuopinhu[1] +
                                  speed.tuopinhu[2]) +
                                "份）"}
                            </Text>
                          </View>
                          <View>
                            <View style={styles.rowView}>
                              <Text style={styles.titleText}>脱贫稳定户：</Text>
                              <Text>{speed.tuopinhu[0]}</Text>
                            </View>
                            <View style={styles.rowView}>
                              <Text style={styles.titleText}>
                                突发困难户1：
                              </Text>
                              <Text>{speed.tuopinhu[1]}</Text>
                            </View>
                            <View style={styles.rowView}>
                              <Text style={styles.titleText}>
                                脱贫不稳定户：
                              </Text>
                              <Text>{speed.tuopinhu[2]}</Text>
                            </View>
                          </View>
                        </View>
                        <View>
                          <View style={styles.titleView}>
                            <Text style={styles.bigTitleText}>边缘户问卷</Text>
                            <Text style={{ paddingTop: 1 }}>
                              {"（共" +
                                (speed.bianyuanhu[0] + speed.bianyuanhu[1]) +
                                "份）"}
                            </Text>
                          </View>
                          <View>
                            <View style={styles.rowView}>
                              <Text style={styles.titleText}>
                                边缘易致贫户：
                              </Text>
                              <Text>{speed.bianyuanhu[0]}</Text>
                            </View>
                            <View style={styles.rowView}>
                              <Text style={styles.titleText}>
                                突发严重困难户2：
                              </Text>
                              <Text>{speed.bianyuanhu[1]}</Text>
                            </View>
                          </View>
                        </View>
                        <View>
                          <View style={styles.titleView}>
                            <Text style={styles.bigTitleText}>一般户问卷</Text>
                            <Text style={{ paddingTop: 1 }}>
                              {"（共" +
                                (speed.yibanhu[0] + speed.yibanhu[1]) +
                                "份）"}
                            </Text>
                          </View>
                          <View>
                            <View style={styles.rowView}>
                              <Text style={styles.titleText}>
                                其他户（长）：
                              </Text>
                              <Text>{speed.yibanhu[0]}</Text>
                            </View>
                            <View style={styles.rowView}>
                              <Text style={styles.titleText}>
                                其他户（短 ）：
                              </Text>
                              <Text>{speed.yibanhu[1]}</Text>
                            </View>
                          </View>
                        </View>
                      </TouchableOpacity>
                    </View>
                  );
                } else {
                  return (
                    <View key={index} style={styles.cardView}>
                      <TouchableOpacity
                        onPress={() => {
                          setVisibleArr((preArr) => {
                            return preArr.map((visible, arrIndex) => {
                              return arrIndex == index ? !visible : visible;
                            });
                          });
                        }}
                      >
                        <Text
                          style={{
                            marginLeft: 20,
                            fontWeight: "bold",
                            marginRight: 20,
                          }}
                        >
                          {speed.province + speed.city}
                        </Text>
                      </TouchableOpacity>
                    </View>
                  );
                }
              }
            })}
          </View>
        )}
      </ScrollView>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    // marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "white",
  },
  headView: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 8,
    marginBottom: 10,
  },
  tagView: {
    flexDirection: "row",
    borderColor: "#41C3EE",
    borderWidth: 1,
    borderRadius: 8,
  },
  tag: {
    paddingLeft: 5,
    padding: 3,
    paddingRight: 5,
    borderRadius: 6,
  },
  leftTag: {
    paddingVertical: 3,
    paddingHorizontal: 5,
    borderBottomLeftRadius: 6,
    borderTopLeftRadius: 6,
  },
  rightTag: {
    paddingLeft: 5,

    padding: 3,
    paddingRight: 5,
    borderTopRightRadius: 6,
    borderBottomRightRadius: 6,
  },
  cardView: {
    backgroundColor: "#fff",
    marginLeft: 20,
    marginRight: 20,
    marginTop: 0,
    marginBottom: 20,
    paddingTop: 10,
    paddingBottom: 10,
    borderRadius: 5,
    elevation: 5, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.5, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  rowView: {
    backgroundColor: "#EAF4FE",
    flexDirection: "row",
    margin: 5,
    marginLeft: 20,
    marginRight: 20,
  },
  titleView: {
    flexDirection: "row",
    margin: 10,
    alignSelf: "center",
  },
  bigTitleText: {
    fontSize: 15,
    fontWeight: "bold",
  },
  titleText: {
    fontWeight: "bold",
  },
  //调研组+时间
  topStyle: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderRadius: 10,
    backgroundColor: "#F5FAF0",
    marginBottom: 20,
    marginTop: 15,
    marginHorizontal: 15,
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
  topText: {
    color: "#B2D989",
    fontWeight: "bold",
    fontSize: 18,
  },
  topStyleAll: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    backgroundColor: "#F5FAF0",
    marginHorizontal: 15,
    marginBottom: 20,
    padding: 10,
  },
  //地址样式
  addrStyle: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    backgroundColor: "#F0F6FF",
    marginHorizontal: 15,
    marginBottom: 20,
    padding: 10,
  },
  addrText: {
    color: "#8BBBFF",
    fontWeight: "bold",
    fontSize: 18,
  },
  //问卷个数样式
  interviewStyle: {
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fef7ef",
    marginHorizontal: 15,
    marginBottom: 20,
    paddingHorizontal: 15,
    paddingTop: 15,
    borderRadius: 12,
  },
  interviewTitle: {
    color: "#f8b66d",
    fontWeight: "bold",
    fontSize: 19,
    marginBottom: 15,
  },
  interviewContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    flexWrap: "wrap",
  },
  interviewborder: {
    width: (DEVICE_WIDTH * 2) / 9,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#fac68d",
    borderRadius: 2,
    marginBottom: 15,
  },
  interviewTag: {
    color: "#fac68d",
    fontSize: 13,
    includeFontPadding: false,
    textAlignVertical: "center",
    paddingTop: 1,
  },
  interviewCount: {
    color: "#fac68d",
    fontSize: 12,
    includeFontPadding: false,
    textAlignVertical: "center",
    paddingTop: 1,
    paddingBottom: 1,
  },
  //座谈访谈人次样式
  fantanStyle: {
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FEF8F7",
    marginHorizontal: 15,
    marginBottom: 15,
    paddingHorizontal: 15,
    paddingTop: 15,
    borderRadius: 12,
  },
  fantanTitle: {
    color: "#EB8F82",
    fontWeight: "bold",
    fontSize: 19,
    marginBottom: 15,
  },
  fantanborder: {
    width: (DEVICE_WIDTH * 2) / 9,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#F0A99F",
    borderRadius: 2,
    marginBottom: 15,
  },
  fantanTag: {
    color: "#F0A99F",
    fontSize: 13,
    includeFontPadding: false,
    textAlignVertical: "center",
    paddingTop: 1,
  },
  fantanCount: {
    color: "#F0A99F",
    fontSize: 12,
    includeFontPadding: false,
    textAlignVertical: "center",
    paddingTop: 1,
    paddingBottom: 1,
  },
  heqiTitle: {
    color: "#6e6e6e",
    fontWeight: "bold",
    fontSize: 16,
  },
  heqiTime: {
    marginTop: 10,
    color: "#777",
    fontWeight: "bold",
    fontSize: 14,
    textAlign: "right",
  },
  button: {
    backgroundColor: "#A80108",
    padding: 20,
    borderRadius: 15,
    alignItems: "center",
    marginHorizontal: 38,
    marginTop: 10,
    marginBottom: 100,
  },
  buttonText: {
    fontSize: 16,
    color: "#ffffff",
    fontWeight: "600",
  },
  //筛选框样式
  dropdown: {
    height: 55,
    borderColor: "gray",
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 10,
    marginBottom: 20,
    marginHorizontal: 20,
  },
  icon: {
    marginRight: 5,
  },
  label: {
    position: "absolute",
    backgroundColor: "white",
    left: 22,
    top: 8,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: 14,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  subtitle: {
    fontSize: 16,
  },
});

export default PlanSpeedAuditor;
